<template>
  <div>
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>出/入库记录
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <div class="component-searchHeader">
      <div class="search-header">
        <div class="left-title">
          <p class="left-text">
            <span class="iconfont">&#xe63d;</span> 筛选查询
          </p>
          <div class="right">
            <button>查询结果</button>
          </div>
        </div>
      </div>
    </div>
    <div class="component-search-box">
      <div class="search-form">
        <el-form :inline="true" :model="searchBox" class="demo-form-inline">
          <el-form-item label="输入搜索：">
            <el-input v-model="searchBox.search" placeholder="材料名称"></el-input>
          </el-form-item>
          <el-form-item label="操作类型：">
            <el-select v-model="searchBox.select" placeholder="全部">
              <el-option label="出库" value="main"></el-option>
              <el-option label="入库" value="sup"></el-option>
              <el-option label="退料" value="stock"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="库存类型：">
            <el-select v-model="searchBox.stock" placeholder="全部">
              <el-option label="总部库存" value="total"></el-option>
              <el-option label="项目部库存" value="project"></el-option>
              <el-option label="施工队库存" value="build"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="component-timePicker" style="width:310px;">
        <div class="block timePicker">
          <span class="demonstration">操作时间：</span>
          <el-date-picker
            v-model="timePicker"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="timestamp"
          ></el-date-picker>
        </div>
      </div>
    </div>
    <div class="component-listHeader">
      <div class="search-header">
        <div class="left-title">
          <p class="left-text">
            <span class="iconfont" style="margin-right:3px;">&#xe61e;</span>出库/入库记录
          </p>
          <div class="right">
            <el-select v-model="sortBy" placeholder="排序方式" class="right-select-margin">
              <el-option
                v-for="item in sortByOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 1100px;margin:0 auto;box-sizing:border-box;">
      <el-table
        ref="multipleTable"
        :data="info"
        tooltip-effect="dark"
        style="width: 100%;"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column label="编号" align="center" width="100" prop="number"></el-table-column>
        <el-table-column label="材料名称" align="center" width="220" show-overflow-tooltip>
          <template slot-scope="scope">
            <div style="text-align:left">{{scope.row.name}}</div>
            <div style="text-align:left">品牌:{{scope.row.brand}}</div>
          </template>
        </el-table-column>
        <el-table-column label="货号/属性" align="center" width="140">
          <template slot-scope="scope">
            <div style="text-align:left;">属性:{{scope.row.att}}</div>
            <div style="text-align:left;">货号:{{scope.row.cargoNum}}</div>
          </template>
        </el-table-column>
        <el-table-column label="订单号" align="center" width="170" prop="orderNum"></el-table-column>
        <el-table-column label="库存信息" align="center" width="100">
          <template slot-scope="scope">
            <div style="text-align:left">数量:{{scope.row.change}}</div>
            <div style="text-align:left">剩余:{{scope.row.stockCount}}</div>
          </template>
        </el-table-column>
        <el-table-column label="库存类型" align="center" width="100" prop="type"></el-table-column>
        <el-table-column label="操作类型" align="center" width="80" prop="oType"></el-table-column>
        <el-table-column label="操作信息" align="center">
          <template slot-scope="scope">
            <div style="text-align:left">{{scope.row.humen}}</div>
            <div style="text-align:left">{{scope.row.time}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="component-paging" v-if="info.length > 0">
      <div class="table-bottom">
        <div class="bottom-left">
          <button>确定</button>
        </div>
        <div class="paging">
          <div class="paging-left">
            <p>
              共
              <span>{{total/pageSize}}</span> 页/
              <span>{{total}}</span> 条数据
            </p>
          </div>
          <el-pagination
            background
            @size-change="SizeChange"
            @current-change="CurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "commonStock",
  props: ["flag"],
  data() {
    return {
      checkAlls: false,
      searchBox: {
        search: "",
        select: "",
        stock: ""
      },
      timePicker: "",
      // 排序方式的data
      sortByOptions: [
        {
          value: "0",
          label: "正序"
        },
        {
          value: "1",
          label: "倒序"
        }
      ],
      // 排序方式的v-model
      sortBy: "",
      value: "",
      info: [
        {
          number: "123456789",
          name: "光纤电缆",
          brand: "Victoria's Secret",
          att: "红色/X",
          cargoNum: "No86577",
          orderNum: "20181231120000",
          change: "+125",
          stockCount: "200",
          type: "施工队库存",
          oType: "出库",
          time: "2017-08-05 15:47:44",
          humen: "admin"
        }
      ], //表格内容
      form: {
        name: "",
        tel: "",
        details: "",
        area_details: ""
      },
      multipleSelection: [], //多选
      counts: 100,
      // 数据总条数
      total: 500,
      // 每页显示数据的条数
      pageSize: 10,
      // 当前显示的页面页码
      currentPage: 1
    };
  },
  methods: {
    //全选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

<style scoped>

/* 搜索栏头部样式 */
.component-searchHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
}

.component-searchHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-searchHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  line-height: 45px;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-searchHeader .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}

.component-searchHeader .right button {
  padding: 0 15px;
  height: 30px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 12px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-searchHeader .right button:hover {
  background-color: #f3f3f3;
}

/* 搜索框主体 */
.component-search-box {
  width: 1100px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-top: none;
  margin: 0 auto;
  text-align: left;
  padding-left: 30px;
}
.component-search-box .search-form {
  height: 60px;
  line-height: 60px;
}
.component-search-box .el-input__inner {
  height: 35px;
  display: inline-block;
}

/* 表头样式 */
.component-listHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
  border-bottom: none;
}

.component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  line-height: 45px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-listHeader .search-header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}

.component-listHeader .search-header .right button {
  padding: 0 15px;
  height: 30px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-listHeader .search-header .right button:hover {
  background-color: #f3f3f3;
}

.component-listHeader .search-header .right .right-select-margin {
  margin-top: 6px;
  margin-right: 8px;
}
.el-form-item {
  text-align: left;
  width: 310px;
}
</style>
